<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>混合模式</title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	ul,li{
		list-style: none;
	}
	ul li{
		width: 200px;
		height: 100px;
		background: yellow;
		margin-bottom: 20px;
		border:2px solid red;
	}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var Li1 = document.getElementById('li1');
			var Li2 = document.getElementById('li2');
			Li1.onmouseover=function(){
				startMove(this,'height',400);
			}
			Li1.onmouseout=function(){
				startMove(this,'height',100);
			}
			Li2.onmouseover=function(){
				startMove(this,'width',400);
			}
			li2.onmouseout=function(){
				startMove(this,'width',200);
			}
		}

		function startMove(obj,attr,iTarget){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
			var icur=parseInt(getStyle(obj,attr));
				var speed =(iTarget-icur)/8;
				speed =speed>0?Math.ceil(speed):Math.floor(speed);
				if (icur==iTarget) {
					clearInterval(obj.timer);
				}else{
					obj.style[attr] = icur + speed + 'px';
				}
			},30)
		}
		
		function getStyle(obj,attr){
			if (obj.currentStyle) {
				return obj.currentStyle[attr];//IE
			}else{
				return getComputedStyle(obj,false)[attr];//火狐
			}
		}
	</script>
</head>
<body>
	<ul>
		<li id="li1"></li>
		<li id="li2"></li>
	</ul>
</body>
</html>